<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const router = useRouter()

async function handleLogin() {
  await router.push({ name: 'Login' })
}

async function handleLogout() {
  userStore.logout()
  await handleLogin()
}

const { t } = useI18n<GlobalMessage, Locales>({ useScope: 'global' })
</script>

<template>
  <a-dropdown trigger="hover">
    <a-button shape="circle" type="outline" border="solid 1 !arco-gray-2">
      <template #icon>
        <i
          text="xl !arco-gray-8"
          :class="
            userStore.hasLogin
              ? 'i-fluent-person-available-24-filled'
              : 'i-fluent-person-delete-20-filled'
          "
        />
      </template>
    </a-button>
    <template #content>
      <a-doption v-show="userStore.hasLogin" @click="router.push({ name: 'User' })">
        <template #icon>
          <i class="i-fluent-contact-card-20-filled" />
        </template>
        {{ t('header.option.user') }}
      </a-doption>
      <a-doption v-if="userStore.hasLogin" @click="handleLogout">
        <template #icon>
          <i i-fluent-person-arrow-right-20-filled />
        </template>
        {{ t('header.option.logout') }}
      </a-doption>
      <a-doption v-else @click="handleLogin">
        <template #icon>
          <i i-fluent-person-arrow-left-20-filled />
        </template>
        {{ t('header.option.login') }}
      </a-doption>
    </template>
  </a-dropdown>
</template>
